<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<title>商品详情</title>
</head>
<body>
	<!-- header.jsp -->
	<jsp:include page="../header.jsp"></jsp:include>
	<!-- /header.jsp -->

	<!-- SECTION -->
	<div class="section">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">
				<!-- Product main img -->
				<div class="col-md-5 col-md-push-2">
					<div id="product-main-img">
						<div class="product-preview">
							<img src="${pageContext.request.contextPath}/${product.pimage}" alt="${product.pname}">
						</div>

						<div class="product-preview">
							<img src="${pageContext.request.contextPath}/${product.pimage}" alt="${product.pname}">
						</div>
					</div>
				</div>
				<!-- /Product main img -->

				<!-- Product thumb imgs -->
				<div class="col-md-2  col-md-pull-5">
					<div id="product-imgs">
						<div class="product-preview">
							<img src="${pageContext.request.contextPath}/${product.pimage}" alt="${product.pname}">
						</div>

						<div class="product-preview">
							<img src="${pageContext.request.contextPath}/${product.pimage}" alt="${product.pname}">
						</div>
					</div>
				</div>
				<!-- /Product thumb imgs -->

				<!-- Product details -->
				<div class="col-md-5">
					<div class="product-details">
						<h2 class="product-name">${product.pname}</h2>
						<div>
							<div class="product-rating">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star-o"></i>
							</div>
							<span class="product-available" id="browse">浏览量：${product.pbrowse}</span>
						</div>
						<div>
							<h3 class="product-price">￥${product.shop_price} <del class="product-old-price">￥${product.market_price}</del></h3>
						</div>
						<p>${product.pdesc}</p>

						<div class="add-to-cart">
							<form action="${pageContext.request.contextPath}/cart" method="post">
								<input type="hidden" name="method" value="addProductToCart">
								<input type="hidden" name="pid" value="${product.pid}">
								<div class="qty-label">
									购买数量
									<div class="input-number">
										<input type="number" min="0" name="count" value="1">
										<span class="qty-up">+</span>
										<span class="qty-down">-</span>
									</div>
								</div>
								<button class="add-to-cart-btn" type="submit"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
							</form>
						</div>
					</div>
				</div>
				<!-- /Product details -->
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /SECTION -->

	<!-- Section -->
	<div class="section">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">

				<div class="col-md-12">
					<div class="section-title text-center">
						<h3 class="title">推荐商品</h3>
					</div>
				</div>

				<c:forEach items="${hotestProducts}" var="p">
					<!-- product -->
					<div class="col-md-3 col-xs-6">
						<div class="product">
							<div class="product-img">
								<img src="${pageContext.request.contextPath}/${p.pimage}" alt="${p.pname}">
								<div class="product-label">
									<span class="hot">HOT</span>
								</div>
							</div>
							<div class="product-body">
								<p class="product-category">
									<c:forEach items="${categorys}" var="c">
										<c:if test="${p.cid == c.cid}">${c.cname}</c:if>
									</c:forEach>
								</p>
								<h3 class="product-name">
									<a href="${pageContext.request.contextPath}/product?method=productDetails&pid=${p.pid}">${p.pname}</a>
								</h3>
								<h4 class="product-price">￥${p.shop_price} <del class="product-old-price">￥${p.market_price}</del></h4>
								<div class="product-rating">
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
								</div>
								<div class="product-btns">
									<button class="quick-view" onclick="productDeatils('${p.pid}')"><i class="fa fa-eye"></i><span class="tooltipp">商品详情查看</span></button>
								</div>
							</div>
							<div class="add-to-cart">
								<button class="add-to-cart-btn" onclick="addProductToCart('${p.pid}')"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
							</div>
						</div>
					</div>
					<!-- /product -->
				</c:forEach>
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /Section -->

	<!-- footer.jsp -->
	<jsp:include page="../footer.jsp"></jsp:include>
	<!-- /footer.jsp -->

</body>
<script>
	$(document).ready(function () {
		$.ajax({
			type: "post",
			url: "${pageContext.request.contextPath}/product",
			data: {
				method : 'addProductBrowse',
				pid : '${product.pid}'
			},
			dataType: "json",
			success: function(data){
				$('#browse').html('浏览量：'+data);
			}
		});
	});
</script>
</html>
